<template>
  <div>
    <Vheader title="常见问题"></Vheader>
    <div class="v-wrapper">
      <div class="v-container">
        <div class="issue-list">
          <div class="issue-list-left" id="issue1">你真的了解返利宝吗？</div>
          <div class="issue-list-right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="issue-list">
          <div class="issue-list-left" id="issue2">充值福卡有什么作用？</div>
          <div class="issue-list-right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="issue-list">
          <div class="issue-list-left" id="issue3">怎么让每天的返利更多呢？</div>
          <div class="issue-list-right"><i class="iconfont icon-right"></i></div>
        </div>
        <div class="issue-list">
          <div class="issue-list-left" id="issue4">我返利的钱怎么不见了？</div>
          <div class="issue-list-right"><i class="iconfont icon-right"></i></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import Vheader from '../../components/header.vue'

  export default {
    data() {
      return {
        title:''
      };
    },
    created() {

    },
    mounted() {
      var that=this;
      var s = document.querySelectorAll('.issue-list');
      for(let i=0;i<s.length;i++){
        s[i].onclick=function () {
          that.$router.push({path:'/issueDetail',query:{title:this.querySelector('.issue-list-left').innerHTML,id:this.querySelector('.issue-list-left').id}});
        }
      }
    },
    methods: {},
    components: {Vheader}
  };
</script>

<style type="text/scss" lang="scss">
  @import "../../common/style/public";

  .issue-list {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border-bottom: solid 1px #f5f5f5;
    background-color: #FFFFFF;
    box-sizing: border-box;
    display: flex;
    .issue-list-left {
      flex: 8;
    }
    .issue-list-right {
      flex: 2;
      text-align: right;
      i {
        font-size: 20px;
      }
    }

  }
</style>
